<template>
  <div class="main">
    <qt-row>
      <qt-text v-if="regNumber.length>3" class="home_regNumber"
      :text="`备案号：${ regNumber }`"></qt-text>
    </qt-row>
    <qt-row>
      <grid-view :item-list="appList" :spanCount="10">
        <qt-view class="grid_item" :type="1" :focusable="true"
        @itemClick="onItemClick"
        >
          <qt-text text="${name}" class="app_name"></qt-text>
          <qt-text text="${pkg}" class="app_name"></qt-text>
          <qt-text text="${verName}" class="app_name"></qt-text>
        </qt-view>
      </grid-view>
    </qt-row>
  </div>
</template>

<script lang="ts">
import {computed, defineComponent, Ref} from "@vue/runtime-core";
import { ref} from "vue";

import EsColumn from "../components/container/EsColumn.vue";
import GridView from "../components/grid-view/index.vue";
import {
  ESAppInfo,
  useESAppList, useESLocalStorage, useESToast,
} from "@extscreen/es3-core";
import EsRow from "../components/container/EsRow.vue";
import {__CONFIG__ } from "./config/global";
import {useLaunch} from "../tools/launch/useApi";

export default defineComponent({
  components: { EsRow, EsColumn,GridView},
  setup() {
    const regNumber = __CONFIG__.regNumber + " " + __CONFIG__.IndRegNumber
    const esAppList = useESAppList()
    const launch = useLaunch();
    const appList: Ref<ESAppInfo[]>=ref([])
    const localStorage = useESLocalStorage();
    const toast=useESToast()
    const onESCreate = () => {
      //获取所有应用列表
      esAppList.getAppList().then(res=>{
        // let sysAppList=(res.system || [])
        let userAppList=(res.user || [])
        let list:Array<ESAppInfo>=[]
        list.push(...userAppList)
        // list.push(...sysAppList)
        //根据历史记录调整排序
        localStorage.getString(__CONFIG__.packageName+'history','[]').then(res=>{
          let history:Array<string>=JSON.parse(res) || []
          console.log('history',history)
          appList.value=sortByReferenceList(list,history)
          console.log('appList',appList.value)
        })

      });
    }
    function sortByReferenceList(list, referenceList) {
      const map = referenceList.reduce((acc, item, index) => {
        acc[item] = index;
        return acc;
      }, {});
      console.log('map',map)
      return list.sort((a, b) => {
        console.log(a.pkg)
        let item1=(map[a.pkg]??999)
        let item2=(map[b.pkg]??999)
        console.log('item1',item1,'item2',item2)
        return  item1-item2;
      });
    }
    function onItemClick(e){
      console.log('onItemClick',e)
      let pkg=e.nativeParams.item.pkg
      launch.launch({
        item:{
          redirectType:3,
          action:{
            type:'ACTIVITY',
            packageName:pkg,
          }
        },
      }).then(res=>{
        console.log('launch',res)
        //启动成功后更新列表顺序
        localStorage.getString(__CONFIG__.packageName+'history','[]').then(res=>{
          let history:Array<string>=JSON.parse(res) || []
          let idx = history.indexOf(pkg);
          if(idx==-1){
            history.unshift(pkg)
          }else{
            const element=history.splice(idx,1)[0]
            history.unshift(element)
          }
          localStorage.putString(__CONFIG__.packageName+'history',JSON.stringify(history))
        })
      }).catch(err=>{
        toast.showToast(err.msg)
      })
    }
    return {
      onESCreate,
      regNumber,
      appList,
      onItemClick

    }
  }
});
</script>

<style scoped>
.main {
  width: 1920px;
  height: 1080px;
  background-color: #EAEDEF;
}

.home_regNumber {
  width: 400px;
  height:32px;
  margin: 20px;
  font-size: 24px;
  font-weight: 40;
  color: #000000;
}
.grid_item{
  width:160px;
  height:140px;
  background-color: bisque;
  border-radius: 12px;
}
.app_name{
  width: 160px;
  font-size: 20px;
  height: 48px;
  color: #000000;
}
</style>
